<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文件管理</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <style>
        #app {
            display: flex;
            background: #f8f8f8;
        }

        #app .fetch {
            cursor: pointer;
        }

        .path {
            margin-top: 20px;
        }

        #app .op {
            width: 370px;
            display: flex;
            flex-direction: column;
            flex-shrink: 0;
            flex-grow: 0;
        }

        #app .content {
            padding: 20px;
            min-height: 100%;
        }

        #app .files {
            margin-top: 20px;
            padding: 0 20px;
            display: flex;
            flex-wrap: wrap;
        }

        #app .file {
            margin: 10px;
            width: 100px;
            height: 130px;
            color: #333;
            background: white;
            border: 1px solid gray;
            border-radius: 5px;
            box-shadow: 3px 3px 3px lightgrey;
            font-size: 14px;
            cursor: pointer;
        }

        #app .file .icon {
            height: 100px;
        }

        #app .file .icon > img {
            width: 100%;
            height: 100%;
        }

        #app .file .title {
            text-align: center;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }


    </style>
</head>
<body>

<div id="app">
    <div class="op">
        <el-input placeholder="请输入内容" v-model="token" placeholder="请输入TOKEN">
            <el-button slot="append" class="fetch" @click="open('toor')">获取文件目录</el-button>
        </el-input>
        <el-button class="mk-dir" type="primary" @click="mkDir()">新建目录</el-button>
        <el-button class="refresh" @click="refresh()">刷新页面</el-button>
        <el-upload
                class="upload-demo"
                drag :on-success="refresh"
                :action="uploadUrl"
                multiple>
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            <!--<div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>-->
        </el-upload>
    </div>
    <div class="content">
        <el-breadcrumb class="path" separator="/">
            <el-breadcrumb-item @click.native="returnTo(-1)">根目录</el-breadcrumb-item>
            <el-breadcrumb-item v-for="(p,index) in path" @click.native="returnTo(index)">{{p}}</el-breadcrumb-item>
        </el-breadcrumb>
        <div class="files">
            <div v-for="file in list" class="file" @click="open(file)">
                <div class="icon"><img :src="getIcon(file)"/></div>
                <el-tooltip class="title-tip" effect="dark" :content="file.name" placement="top">
                    <div class="title">{{file.name}}</div>
                </el-tooltip>
            </div>
        </div>
    </div>

</div>


<script>
    new Vue({
        el: '#app',
        data: function () {
            return {
                token: '',
                list: [],
                path: [],
                parent: ''
            }
        },
        computed: {
            currentPath: function () {
                return this.path.join('/');
            },
            uploadUrl: function () {
                return 'file/upload?path=' + this.currentPath + '&token=' + this.token;
            }
        },
        methods: {
            refresh: function () {
                this.getFiles(this.currentPath);
            },
            getIcon: function (file) {
                if (file.isDir) {
                    return 'img/打开.svg';
                } else {
                    return 'img/文件.svg';
                }
            },
            open: function (file) {
                if (file === 'toor') {
                    this.getFiles('');
                } else {
                    if (file.isDir) {
                        var path = this.path.join('/') + '/' + file.name;
                        this.getFiles(path);
                        this.path.push(file.name);
                    } else {
                        this.downloadFile(file);
                    }
                }
            },
            returnTo: function (index) {
                var path = '/';
                if (index >= 0) {
                    for (var i = 0; i <= index; i++) {
                        path += this.path[i] + '/';
                    }
                    this.path.splice(index + 1, this.path.length - index - 1);
                } else {
                    this.path = [];
                }
                this.getFiles(path);

            },
            getFiles: function (path) {
                var _this = this;
                axios.get('file/root?token=' + this.token + '&path=' + path)
                    .then(function (response) {
                        _this.list = response.data;
                        //排序
                        _this.list = _this.list.sort(function (a, b) {
                            if (a.isDir) {
                                if (b.isDir) {
                                    return a.name.toLowerCase() >= b.name.toLowerCase() ? 1 : -1;
                                } else {
                                    return -1;
                                }
                            } else {
                                if (b.isDir) {
                                    return 1;
                                } else {
                                    return a.name.toLowerCase() >= b.name.toLowerCase() ? 1 : -1;
                                }
                            }
                        });
                        console.log(response);
                    })
                    .catch(function (err) {
                        console.log(err);
                    });
            },
            downloadFile: function (file) {
                var _this = this;
                this.$prompt('1+1=', '输入验证码', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消'
                }).then(function (data) {
                    if (data.value === '2') {
                        window.open('file/download?token=' + _this.token + '&path=' + _this.currentPath + '&name=' + file.name);
                    } else {
                        alert('验证码错误');
                    }
                }).catch(function () {
                    this.$message({
                        type: 'info',
                        message: '取消输入'
                    });
                });
            },
            mkDir: function () {
                var _this = this;
                this.$prompt('请输入名称', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消'
                }).then(function (data) {
                    axios.get('file/mkDir?token=' + _this.token + '&path=' + _this.currentPath + '&name=' + data.value)
                        .then(function (response) {
                            if (response.data) {
                                _this.refresh();
                            }
                        })
                        .catch(function (err) {
                            console.log(err);
                        });
                }).catch(function () {
                    this.$message({
                        type: 'info',
                        message: '取消输入'
                    });
                });

            }
        },
        created: function () {
        }
    });


</script>
</body>
</html>